

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>

            /* css 代码  */

        </style>

        <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>

        <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>

        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>

        <script src="https://img.hcharts.cn/highcharts/modules/data.js"></script>

        <script src="https://img.hcharts.cn/highcharts/modules/series-label.js"></script>

        <script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>

        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

    </head>

    <body>

        <div id="container" style="min-width:400px;height:400px"></div>

        <div class="message"></div>

        <script>

$(function () {

    // 获取 CSV 数据并初始化图表
    alert('hello');
    $.ajax({
            url: 'http://192.168.0.3:8000/apis/test/',
            // dataType: "json",
            type: 'get',
            success: function (e) {   //成功后回调
                alert('ok');
                },
            error: function(e){    //失败后回调
                alert('error');
                }
    });

    // 获取 CSV 数据并初始化图表
    $.getJSON('http://192.168.0.3:8000/apis/test/', function (data) {
        alert(data[0].name);
        $('#container').highcharts({
            title: {
                text: '某网站日常访问量'
            },
            subtitle: {
                text: '数据来源: Google Analytics'
            },
            xAxis: {
                tickInterval: 7 * 24 * 3600 * 1000, // 坐标轴刻度间隔为一星期
                tickWidth: 0,
                gridLineWidth: 1,
                labels: {
                    align: 'left',
                    x: 3,
                    y: -3
                },
                // 时间格式化字符
                // 默认会根据当前的刻度间隔取对应的值，即当刻度间隔为一周时，取 week 值
                dateTimeLabelFormats: {
                    week: '%Y-%m-%d'
                }
            },
            yAxis: [{ // 第一个 Y 轴，放置在左边（默认在坐标）
                title: {
                    text: null
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }, {    // 第二个坐标轴，放置在右边
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true,  // 通过此参数设置坐标轴显示在对立面
                title: {
                    text: null
                },
                labels: {
                    align: 'right',
                    x: -3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }],
            series: [{
              id: 'series 1',
              type: 'spline',       // type 默认值是 'line'
              name: data[0].name,
              data: data[0].data,
              lineWidth: 2          // 该参数会覆盖 plotOptions.spline.lineWidth 里的配置
            }, {
              name: data[1].name,
              data: data[1].data,
              lineWidth: 3          // 该参数会覆盖 plotOptions.series.lineWidth 里的配置
            }, {
              name: data[2].name,
              data: data[2].data,
            }],
            legend: {
                align: 'left',
                verticalAlign: 'top',
                y: 20,
                floating: true,
                borderWidth: 0
            },
            tooltip: {
                shared: true,
                crosshairs: true,
                // 时间格式化字符
                // 默认会根据当前的数据点间隔取对应的值
                // 当前图表中数据点间隔为 1天，所以配置 day 值即可
                dateTimeLabelFormats: {
                    day: '%Y-%m-%d'
                }
            },
            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            // 数据点点击事件
                            // 其中 e 变量为事件对象，this 为当前数据点对象
                            click: function (e) {
                                $('.message').html( Highcharts.dateFormat('%Y-%m-%d', this.x) + ':<br/>  访问量：' +this.y );
                            }
                        }
                    },
                    marker: {
                        lineWidth: 1
                    }
                }
            }
        });
    });
});
/*
            series: [{
              id: 'series 1',
              type: 'spline',       // type 默认值是 'line'
              name: 'date',
              data: [1, 4, 56, 69],
              lineWidth: 2          // 该参数会覆盖 plotOptions.spline.lineWidth 里的配置
            }, {
              name: 'pv',
              data: [4, 5, 6],
              lineWidth: 3          // 该参数会覆盖 plotOptions.series.lineWidth 里的配置
            }, {
              data: [10, 500, 199]  // 该数据列会继承 plotOptions.series.lineWidth 里的配置
            }],
*/
        </script>

    </body>

</html>
